<!-- 该表单组件基于 uniforms -->
<template>
	<view class="form-list-item">
		<view class="form-list-item-content" @click="formItemClick">
			<uni-forms-item
				class="form-list-item-unicontent"
				:class="'err-show-type-' + errShowType"
				:label-width="labelWidth"
				:label-align="labelAlign"
				:label-position="labelPosition"
				:label="label"
			>
				<uni-easyinput
					:class="'input-text-align-' + inputTextAlign + ' ' + (inputTextHidden ? 'input-text-hidden' : '')"
					:value="valueText"
					@confirm="confirmValChange"
					@input="inputChange"
					:placeholder="placeholder"
					:inputBorder="false"
					:type="inputType"
					:maxlength="maxlength"
				></uni-easyinput>
				<view class="value-text" v-if="inputTextHidden" :class="'input-text-align-' + inputTextAlign" :style="{ width: valueTextWidth + '%' }">
					<text v-if="type == 'switch' || !valueText || valueText == ''" class="placeholder">{{ placeholder }}</text>
					<text v-if="type != 'switch' && valueText && valueText != ''" class="content">{{ valueText }}</text>
				</view>
				<view class="switch" v-if="type == 'switch'"><switch class="switch-item" :checked="value" @change="switchChange" color="#FFA723" /></view>
			</uni-forms-item>

			<uni-icons class="arrow" v-if="arrowShow" type="arrowright" :size="30"></uni-icons>
		</view>
		<!-- <cover-view> -->
		<lb-picker
			v-if="pickerType != ''"
			ref="picker"
			v-model="pickerVal"
			:level="99"
			:mode="pickerType"
			:list="pickerList"
			@confirm="pickerConfirm"
			@change="pickerChange"
		></lb-picker>

		<!-- <uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup> -->
		<!-- </cover-view> -->
	</view>
</template>

<script>
/*
 * @event {Function} 	change
 * @property {String} .sync	value
 */
import uniEasyinput from '../uni-easyinput/uni-easyinput.vue';
import uniFormsItem from '../uni-forms-item/uni-forms-item.vue';
import uniPopup from '../uni-popup/uni-popup.vue';
import LbPicker from '../lb-picker';
import uniIcons from '../uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons,
		uniEasyinput,
		uniFormsItem,
		uniPopup,
		LbPicker
	},
	props: {
		type: {
			type: String, //表单类型 'text' 'textarea ' 'number' 'idcard' 'digit' 'selector ' 'multiSelector ' 'unlinkedSelector ' 'route' 'switch' 等uni-input类型
			default: ''
		},
		routeLink: {
			type: String, // 路由地址
			default: ''
		},
		label: {
			//表单 label标签
			type: String,
			default: ''
		},
		labelWidth: {
			//左边标题的宽度单位rpx
			type: Number | String,
			default: ''
		},
		// 对齐方式，left|center|right
		labelAlign: {
			type: String,
			default: ''
		},
		// lable的位置，可选为 left-左边，top-上边
		labelPosition: {
			type: String,
			default: ''
		},
		placeholder: {
			//默认提示信息
			type: String,
			default: ''
		},
		value: {
			//值
			type: String | Number | Boolean | Array
		},
		inputTextAlign: {
			// 输入位置分布 'left' 'right' 'center'
			type: String,
			default: ''
		},
		errShowType: {
			// [undertext|toast|modal]	校验错误信息提示方式
			type: String,
			default: 'toast'
		},
		arrowShow: {
			//是否显示箭头

			type: Boolean,
			default: false
		},
		readOnly: {
			//是否只读
			type: Boolean,
			default: false
		},
		pickerList: {
			type: Array,
			default: function() {
				return [];
			}
		},
		maxlength:{
			type:Number,
			default:500
		}
	},
	computed: {
		inputType() {
			// 输入框；类型
			console.log('type', this.$props.type);
			if (this.$props.type == 'text' || this.$props.type == 'textarea' || this.$props.type == 'number' || this.$props.type == 'idcard' || this.$props.type == 'digit')
				return this.$props.type;
			else return 'text';
		},
		pickerType() {
			// picker类型
			if (this.$props.type == 'selector' || this.$props.type == 'multiSelector' || this.$props.type == 'unlinkedSelector') return this.$props.type;
			else return '';
		},
		inputTextHidden() {
			// input框是否隐藏
			if (
				this.$props.readOnly ||
				this.$props.type == 'selector' ||
				this.$props.type == 'multiSelector' ||
				this.$props.type == 'unlinkedSelector' ||
				this.$props.type == 'switch' ||
				this.$props.type == 'route'
			)
				return true;
			else return false;
		},
		valueText() {
			// 值字符串
			// console.log('值', this.$props.value);
			if (this.$props.value) {
				if (typeof this.$props.value == 'string') return this.$props.value;
				// else if (typeof this.$props.value == 'number') return `${this.$props.value}`;
				else if (typeof this.$props.value == 'object' && this.$props.value.length) return this.$props.value.join('-');
				else return `${this.$props.value}`;
			} else {
				return '';
			}
		},
		valueTextWidth() {
			//值字符串宽度%
			if (this.$props.type == 'switch') return 83;
			else return 100;
		}
	},
	data() {
		return {
			pickerVal: []
		};
	},
	methods: {
		confirmValChange(even) {
			// input 值变化
			let val = even.detail.value;
			console.log('值变化', val);
			this.$emit('update:value', val);
			this.$emit('change', val);
		},
		inputChange(value){
			// inputChange
			console.log("inputChange",value)
			this.$emit('update:value', value);
			this.$emit('change', value);
		},
		pickerConfirm(event) {
			// picker值变化
			// console.log('picker值', event);
			this.$emit('update:value', event.value);
			this.$emit('change', event.value);
			
		},
		pickerChange(event) {
			if (event.change == 'scroll') {
				// console.log('picker scoll 值', event);
				this.$emit('pickerChange', event.value);
				this.pickerVal=event.value
			}
			console.log('picker scoll 值', this.pickerVal)
		},
		switchChange(event) {
			// switch值变化
			var val = event.detail.value;
			console.log('switch值', val);
			this.$emit('update:value', val);
			this.$emit('change', val);
		},
		openpicker() {
			// 打开选择器
			if (this.$refs && this.$refs.picker) this.$refs.picker.show();
		},
		formItemClick() {
			// 表单元素被点击
			if (this.$props.type === 'selector' || this.$props.type === 'multiSelector' || this.$props.type === 'unlinkedSelector') {
				// picker
				this.openpicker();
			} else if (this.$props.type === 'route' && this.$props.routeLink) {
				// 路由跳转
				console.log('跳转地址', this.$props.routeLink);
				uni.navigateTo({ url: this.$props.routeLink });
			} else {
			}
		}
	},
	mounted() {
		console.log('value', this.value);
		this.pickerVal = this.value;
	}
};
</script>

<style lang="scss" scoped>
.form-list-item {
	width: 100%;
	display: block;
	.arrow {
		display: flex;
	}
	.form-list-item-content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
</style>
